.SecurityHome {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;

	& > div {
		height: 100%;

		&.left {
			width: 320px;
			background: white;
			padding: 8px;
			border-radius: 8px;
			margin-right: 16px;
			overflow-y: scroll;

			&::-webkit-scrollbar {
				display: none;
			}

			& > div {
				& > .NavTitle {
					padding: 4px;
					font-size: 24px;
					font-family: ShuHeiTi;
					font-weight: bold;
					color: #262626;
					cursor: pointer;
					border-radius: 8px;
					background: rgba(0, 0, 0, 0.15);
					box-shadow: 0 1px 2px -2px rgba(0, 0, 0, 0.16),
						0 3px 6px 0 rgba(0, 0, 0, 0.12), 0 5px 12px 4px rgba(0, 0, 0, 0.09);
					margin-bottom: 8px;
					transition: all 0.35s;

					&.active,
					&:hover {
						color: white;
						background: rgba(0, 0, 0, 0.65);
					}
				}

				& > .NavItem {
					padding: 4px 8px;
					font-size: 20px;
					font-family: ShuHeiTi;
					font-weight: bold;
					color: #262626;
					cursor: pointer;
					margin-bottom: 2px;
					transition: all 0.35s;
					border-radius: 8px;

					&.active,
					&:hover {
						color: white;
						background: rgba(0, 0, 0, 0.65);
					}
				}
			}
		}

		&.right {
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;

			& > div {
				width: 100%;
				flex: 1;

				& > div {
					display: flex;
					align-items: center;
					justify-content: center;
				}

				&.top {
					margin-bottom: 16px;
					display: flex;
					align-items: center;
					justify-content: center;

					& > div {
						height: 100%;
						background: white;
						padding: 8px;
						border-radius: 8px;
						display: flex;
						align-items: center;
						justify-content: center;
						flex-direction: column;

						& > div {
							width: 100%;

							&.List {
								flex: 1;
							}
						}

						&.left {
							margin-right: 16px;
							flex: 3;

							& > .List {
								display: flex;
								align-items: center;
								justify-content: center;

								& > div {
									flex: 1;
									height: 100%;
									display: flex;
									align-items: center;
									justify-content: center;

									&:last-child {
										flex-direction: column;
									}

									& > .list {
										width: 100%;
										display: flex;
										align-items: center;
										justify-content: center;
										padding: 16px;

										& > span {
											font-size: 32px;
											margin-right: 16px;
											color: var(--color);
										}

										& > div:nth-child(2) {
											flex: 1;
											font-size: 24px;
											font-family: ShuHeiTi;
											font-weight: bold;
											color: #262626;
										}

										& > div:nth-child(3) {
											font-size: 20px;
											font-family: DIN Condensed;
											font-weight: bold;
											color: #262626;

											& > span {
												font-size: 16px;
												font-family: PingFang SC;
												color: #262626;
											}
										}
									}
								}
							}
						}

						&.right {
							flex: 2;
						}
					}
				}

				&.btm {
					display: flex;
					align-items: center;
					justify-content: center;

					& > div {
						height: 100%;
						background: white;
						padding: 8px;
						border-radius: 8px;
						display: flex;
						align-items: center;
						justify-content: center;
						flex-direction: column;

						& > div {
							width: 100%;

							&.List {
								flex: 1;
							}
						}

						&.left {
							margin-right: 16px;
							flex: 5;

							& > .List {
								display: flex;
								align-items: center;
								justify-content: center;

								& > div:nth-child(1) {
									flex: 1;

									& > div {
										display: flex;
										align-items: center;
										justify-content: center;
										padding: 16px;

										& > img {
											width: 40px;
											height: 40px;
											margin-right: 16px;
										}

										& > div {
											flex: 1;
											display: flex;
											align-items: center;
											justify-content: space-between;

											& > div:nth-child(1) {
												flex: 1;
												font-size: 20px;
												font-family: ShuHeiTi;
												font-weight: bold;
												color: #262626;
											}

											& > div:nth-child(2) {
												font-size: 24px;
												font-family: DIN Condensed;
												font-weight: bold;
												color: #262626;

												& > span {
													font-size: 16px;
													font-family: PingFang SC;
													color: #262626;
												}
											}
										}
									}
								}

								& > div:nth-child(2) {
									width: 400px;
									height: 100%;
									margin: 16px;
									padding: 16px;
									border: 1px solid #cccccc;
									background: rgba(0, 0, 0, 0.05);
									display: flex;
									align-items: center;
									justify-content: center;
									flex-direction: column;

									& > div:nth-child(1) {
										height: 160px !important;
										overflow: hidden;
									}

									& > div:nth-child(2) {
										width: 100%;

										& > div {
											width: 100%;
											display: flex;
											align-items: center;
											justify-content: center;
											padding: 16px;

											& > img {
												width: 40px;
												height: 40px;
												margin-right: 16px;
											}

											& > div {
												flex: 1;
												display: flex;
												align-items: center;
												justify-content: space-between;

												& > div:nth-child(1) {
													flex: 1;
													font-size: 20px;
													font-family: ShuHeiTi;
													font-weight: bold;
													color: #262626;
												}

												& > div:nth-child(2) {
													font-size: 24px;
													font-family: DIN Condensed;
													font-weight: bold;
													color: #262626;

													& > span {
														font-size: 16px;
														font-family: PingFang SC;
														color: #262626;
													}
												}
											}
										}
									}
								}

								& > div:nth-child(3) {
									flex: 1;

									& > div {
										display: flex;
										align-items: center;
										justify-content: center;

										& > img {
											width: 120px;
											height: 120px;
											object-fit: contain;
										}

										& > div {
											& > div:nth-child(1) {
												flex: 1;
												font-size: 24px;
												font-family: ShuHeiTi;
												font-weight: bold;
												color: #262626;
											}

											& > div:nth-child(2) {
												font-size: 32px;
												font-family: DIN Condensed;
												font-weight: bold;
												color: #262626;
											}
										}
									}
								}
							}
						}

						&.right {
							flex: 1;

							& > .List {
								display: flex;
								align-items: center;
								justify-content: center;
								flex-direction: column;

								& > div {
									display: flex;
									align-items: center;
									justify-content: center;
									padding: 16px 0;

									& > img {
										width: 56px;
										height: 56px;
										margin-right: 16px;
									}

									& > div {
										flex: 1;

										& > div:nth-child(1) {
											flex: 1;
											font-size: 24px;
											font-family: ShuHeiTi;
											font-weight: bold;
											color: #262626;
										}

										& > div:nth-child(2) {
											font-size: 32px;
											line-height: 32px;
											font-family: DIN Condensed;
											font-weight: bold;
											color: #262626;
										}
									}
								}
							}
						}
					}
				}
			}
		}
	}

	.Title {
		font-size: 20px;
		font-family: ShuHeiTi;
		font-weight: bold;
		color: #262626;
		padding: 0 8px;
	}
}
